<template>
    <div class="container" :style="'height: '+docheight+'px'">
      <leftcont></leftcont>
      <div class="righCont">
        <topcont></topcont>
        <div class="content">
          <div class="mainCont">
            <div class="mainTop">
              <div class="mainTitle">基本详情</div>
              <btn value="禁用该用户" @click="backfn"></btn>
            </div>
            <div class="userInfo">
              <div class="userLeft">
                <div class="userImg">
                  <img :src="detailInfo.teacher_head_img+ossSrc">
                  <div class="sexTag">
                    <span v-if="detailInfo.teacher_sex==1" class="iconfont icon-nan"></span>
                    <span v-if="detailInfo.teacher_sex==2" class="iconfont icon-nv"></span>
                    <span>{{ detailInfo.age }}</span>
                  </div>
                </div>
              </div>
              <div class="userRight">
                <div class="userRightInfo">
                  <div class="infoItem">
                    <div class="infoName">用户昵称:</div>
                    <div class="infoVal">{{ detailInfo.teacher_nick_name }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">真实姓名:</div>
                    <div class="infoVal">{{ detailInfo.teacher_name }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">账号状态:</div>
                    <div class="infoVal">
                      <span class="greenBtn" v-if="detailInfo.teacher_status==1">正常</span>
                      <span class="redBtn" v-if="detailInfo.teacher_status==2">禁用</span>
                    </div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">服务状态:</div>
                    <div class="infoVal">
                      <span class="greenBtn" v-if="detailInfo.service_status==1">接单中</span>
                      <span class="redBtn" v-if="detailInfo.service_status==2">已下线</span>
                    </div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">保证金:</div>
                    <div class="infoVal">{{ detailInfo.earnest_money }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">累计提现:</div>
                    <div class="infoVal">{{ detailInfo.teacher_withdrawal_money }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">授课日期:</div>
                    <div class="infoVal">{{ detailInfo.teacher_date }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">授课时间:</div>
                    <div class="infoVal">{{ detailInfo.teacher_time }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">授课经验:</div>
                    <div class="infoVal">{{ detailInfo.teacher_years }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">身份证号:</div>
                    <div class="infoVal">{{ detailInfo.teacher_idcard }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">联系电话:</div>
                    <div class="infoVal">{{ detailInfo.teacher_mobile }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">微信号:</div>
                    <div class="infoVal">{{ detailInfo.teacher_wechat }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">创建时间:</div>
                    <div class="infoVal">{{ detailInfo.create_time }}</div>
                  </div>
                  <div class="infoItem">
                    <div class="infoName">修改时间:</div>
                    <div class="infoVal">{{ detailInfo.update_time }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="payTable">
              <div class="trendTop">金额明细({{ total }})</div>
              <div class="tableCont">
                <el-table
                  :data="tableData"
                  style="width: 100%">
                  <el-table-column
                    prop="bill_number"
                    width="200"
                    show-overflow-tooltip
                    label="订单编号"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="bill_name"
                    label="订单名称"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="bill_name"
                    label="订单规格"
                  >
                  </el-table-column>
                  <el-table-column
                    label="变更类型"
                  >
                  <template slot-scope="scope">
                    <div class="greenBtn" v-if="scope.row.bill_type==1">项目提成</div>
                    <div class="greenBtn" v-if="scope.row.bill_type==2">好评奖金</div>
                    <div class="redBtn" v-if="scope.row.bill_type==3&&scope.row.bill_name=='提现申请'">{{ scope.row.bill_name }}</div>
                    <div class="blueBtn" v-if="scope.row.bill_type==3&&scope.row.bill_name=='提现驳回'">{{ scope.row.bill_name }}</div>
                  </template>
                  </el-table-column>
                  <el-table-column
                    prop="bill_money"
                    label="变更金额"
                  >
                    <template slot-scope="scope">
                      <div class="greenBtn" v-if="scope.row.bill_type==1">+{{ scope.row.bill_money }}</div>
                      <div class="greenBtn" v-if="scope.row.bill_type==2">+{{ scope.row.bill_money }}</div>
                      <div class="redBtn" v-if="scope.row.bill_type==3&&scope.row.bill_name=='提现申请'">-{{ scope.row.bill_money }}</div>
                      <div class="blueBtn" v-if="scope.row.bill_type==3&&scope.row.bill_name=='提现驳回'">+{{ scope.row.bill_money }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="after_change_balance"
                    label="账户金额"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="create_time"
                    label="变更时间"
                  >
                  </el-table-column>
                </el-table>
                <div class="pageCont">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="per_page"
                    :current-page="page"
                    @current-change="pageFn"
                    :total="total">
                  </el-pagination>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import leftcont from '@/components/leftCont.vue'
    import topcont from '@/components/topCont.vue'
    import btn from '@/components/public/btn.vue'
    
    import {fundDetails,editShowTech} from "@/http/api"

    export default {
      components: {leftcont,topcont,btn},
      data() {
        return {
          detailInfo:{},
          page:1,
          per_page:5,
          total:0,
          tableData:[],
        }
      },
      props: {},
      methods:{
        pageFn(index){
          this.page = index
          this.getTechMoney()
        },
        serchFn(){
          this.page = 1
          this.total = 0
          this.getOrder()
        },
        backfn(){
          this.$router.back()
        },
        getdata(){
          var data ={
            teacher_id:this.$route.query.id,
          }
          editShowTech(data).then((res)=>{
            if(res.data.code==1){
              this.detailInfo = res.data.data
            }else{
              this.$message(res.data.msg)
            }
          }).catch((err)=>{
            this.$message('服务器请求超时');
          })
        },
        getTechMoney(){
          var data ={
            teacher_id:this.$route.query.id,
            page:this.page,
            per_page:this.per_page,
          }
          fundDetails(data).then((res)=>{
            if(res.data.code==1){
              this.tableData = res.data.data.data
              this.total = res.data.data.total
            }else{
              this.$message(res.data.msg)
            }
          }).catch((err)=>{
            this.$message('服务器请求超时');
          })
        }
      },
      mounted(){
      },
      created() {
        this.getTechMoney()
        this.getdata()
      },
    }
  </script>
  
  <style scoped lang="less">
    .container{
      width: 100%;
      display: flex;
      overflow: hidden;
      .righCont{
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 15px;
        height: 100%;
        width: 10px;
        background-color: #F4F8FF;
        .content{
          padding: 20px;
          box-sizing: border-box;
          width: 100%;
          flex: 1;
          overflow: auto;
          .mainCont{
            width: 100%;
            padding: 15px;
            box-sizing: border-box;
            background-color: #fff;
            .redBtn{
              color: #F56C6C;
            }
            .greenBtn{
              color: #85CE61;
            }
            .blueBtn{
                color: #96A1FE;
              }
            .blackBtn{
              color: #666;
            }
            .mainTop{
              display: flex;
              margin-bottom: 25px;
              align-items: center;
              justify-content: space-between;
              .mainTitle{
                font-size: 16px;
                font-weight: bold;
              }
            }
            .userInfo{
              width: 100%;
              padding: 30px;
              display: flex;
              background-color: #eff2fe;
              box-sizing: border-box;
              align-content: center;
              .userLeft{
                .userImg{
                  width: 120px;
                  height: 120px;
                  padding: 4px;
                  border-radius: 50%;
                  background-color: #916ce0;
                  position: relative;
                  .sexTag{
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    height: 30px;
                    width: 60px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 12px;
                    background-color: #916ce0;
                    color: white;
                    border-radius: 15px;
                  }
                  img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                  }
                }
              }
              .userRight{
                width: 200px;
                flex: 1;
                box-sizing: border-box;
                padding: 15px;
                .userRightHead{
                  width: 80px;
                  text-align: right;
                  font-size: 15px;
                  font-weight: bold;
                }
                .lifeImg{
                  display: flex;
                  flex-wrap: wrap;
                  padding-left: 95px;
                  margin-top: 20px;
                  box-sizing: border-box;
                  img{
                    height: 200px;
                    margin-bottom: 20px;
                    margin-right: 10px;
                  }
                }
                .hasMargin{
                  margin-top: 30px;
                }
                .desInfo{
                  padding-left: 95px;
                  box-sizing: border-box;
                  margin-top: 20px;
                }
                .userRightInfo{
                  width: 100%;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: space-between;
                  .infoItem{
                    width: 48%;
                    margin:10px 0px;
                    display: flex;
                    line-height: 20px;
                    font-size: 14px;
                    .infoName{
                      width: 80px;
                      text-align: right;
                      margin-right: 15px;
                      color: #999;
                    }
                  }
                }
              }
            }
            .payTable{
              margin-top: 20px;
              width: 100%;
              background-color: #fff;
              padding: 15px;
              box-sizing: border-box;
              .trendTop{
                font-weight: bold;
                font-size: 16px;
                cursor: pointer;
              }
              .tableSerchCont{
              width: 100%;
              display: flex;
              justify-content: flex-end;
              margin-bottom: 10px;
              .serchItem{
                width: 150px;
                margin-left: 10px;
              }
            }
              .tableCont{
                width: 100%;
                margin-top: 15px;
                .tableSerchCont{
                  width: 100%;
                  display: flex;
                  justify-content: flex-end;
                  margin-bottom: 10px;
                  .serchItem{
                    width: 150px;
                    margin-left: 10px;
                  }
                  .timeItem{
                    margin-left: 10px;
                  }
                }
                .ctrolBtn{
                  display: flex;
                  .text_btn{
                    margin: 0 5px;
                    cursor: pointer;
                    font-size: 14px;
                  }
                  .redBtn{
                    color: #F56C6C;
                  }
                  .blueBtn{
                    color: #96A1FE;
                  }
                  .greenBtn{
                    color: #85CE61;
                  }
  
                }
                .pageCont{
                  padding: 30px 0;
                  display: flex;
                  justify-content: center;
                }
              }
            }
          }
        }
      }
    }
  </style>
  